<template>
    <el-row :gutter="10" style="height:49%;">
        <el-col :span="12" style="">
            <div style="height: 100%;width: 100%;padding:0;background-color: #ffffff">
                <div class="block text-center">
                    <el-carousel style="height: 100%;">
                        <el-carousel-item v-for="item in imageAnsmts" :key="item" style="text-align:center">
                                <el-image :src="item.content" :title="item.link" fit="fill" @click="openLink(item.link)" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </el-col>
        <el-col :span="12"  style="padding:0px;background-color: #ffffff">
            <ul id="toDoList" v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
                <li v-for="(item,i) in textAnsmts" :key="i" class="infinite-list-item" style="cursor: pointer"
                    :title="item.link" @click="openLink(item.link)">{{ item.content }}</li>
            </ul>
        </el-col>
    </el-row>
    <el-divider style="height:1%;padding: 0;margin: 0"/>
    <el-row :gutter="5"  style="height:50%;margin: 0">
        <el-col :span="8">
            <h4 style="text-align: center;">近七日业务趋势</h4>
            <div ref="ec" style="height:100%;width: 100%;padding:5px;">

            </div>
        </el-col>
        <el-col :span="8">
            <div ref="ec2" style="height:100%;width: 100%;padding:5px;">

            </div>
        </el-col>
        <el-col :span="8">
            <div ref="ec3" style="height:100%;width: 100%;padding:5px;">

            </div>
        </el-col>
    </el-row>
</template>

<script setup>
    import request from '@/utils/request.js'
    import {ref, reactive, onMounted} from 'vue'
    import * as echarts from 'echarts'
    let ec = ref(null)
    let ec2 = ref(null)
    let ec3 = ref(null)
    let textAnsmts = reactive([])
    let imageAnsmts = reactive([])
    let statistics = {
        countData:{xData:null, yData:null},
        businessPercentDatas:null,
        satisfyData:100,
    }
    let form =ref({})
    onMounted(function () {
        request.post("/api/common/getAnsmts", {pageSize:10, currentPage:1, type:'text', valid:1}).then(resp => {
            textAnsmts.splice(0, textAnsmts.length)
            textAnsmts.push(...resp.records)
        })
        request.post("/api/common/getAnsmts", {pageSize:10, currentPage:1, type:'image', valid:1}).then(resp => {
            imageAnsmts.splice(0, imageAnsmts.length)
            imageAnsmts.push(...resp.records)
        })
        request.get("/api/common/getStatistics").then(resp => {
            statistics.countData.xData =  resp.countData.xData;
            statistics.countData.yData = resp.countData.yData;
            statistics.businessPercentDatas = resp.businessPercentDatas
            statistics.satisfyData  = resp.satisfyData

            // 基于准备好的dom，初始化echarts实例
            var lineGraphs = echarts.init(ec.value);
            var pieCharts = echarts.init(ec2.value);
            var persent = echarts.init(ec3.value);
            // 绘制图表
            let lineGraphsOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: statistics.countData.xData || ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: statistics.countData.yData || [150, 230, 224, 218, 135, 147, 260],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            let pieChartsOption = {
                title: {
                    text: '近七日业务占比',
                    subtext: '统计数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '业务占比',
                        type: 'pie',
                        radius: '50%',
                        data: statistics.businessPercentDatas||[
                            { value: 3, name: '咨询' },
                            { value: 3, name: '投诉' },
                            { value: 3, name: '表扬' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            let persentOption = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: '满意度',
                        type: 'gauge',
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}'
                        },
                        data: [
                            {
                                value: statistics.satisfyData || 100,
                                name: '近七日平均满意度'
                            }
                        ]
                    }
                ]
            };
            lineGraphsOption && lineGraphs.setOption(lineGraphsOption);
            pieChartsOption && pieCharts.setOption(pieChartsOption);
            persentOption && persent.setOption(persentOption);
        })

    })
    const publicMsgs = ref(["公告1","公告2","公告3",
        "公告4","公告6","公告7",])

    const load = () => {

    }
    function openLink(link) {
        if(link !== ''&&link != null){
            window.open(link)
        }
    }

</script>

<style scoped>
    .infinite-list {
        height: 300px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: var(--el-color-primary-light-9);
        margin: 10px;
        color: var(--el-color-primary);
        transition: height 0.3s;
    }
    .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
    }

    .infinite-list-item:hover{
        height: 60px;
    }

    #toDoList::-webkit-scrollbar {
        width: 4px;
    }
    #toDoList::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
    }
    #toDoList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
</style>
